<html>
	<head>
		<title>simpleslide 1.1</title>
		<script src='http://code.jquery.com/jquery-nightly.js'></script>
		<script src='../jquery.simpleslide/jquery.simpleslide.min.js'></script>
		<link rel="stylesheet" href="../jquery.simpleslide/jquery.simpleslide.css"></link>
		<script>
			$(document).ready(function(){
				$('#myslides').simpleslide('settings', {'frameWidth' : 500,'frameHeight' : 333 });
				$('#myslides2').simpleslide('settings', {'frameWidth' : 300,'frameHeight' : 133, 'startingSlide': 2 , 'timePerSlide': 2000});
			});
		</script>
	</head>
	<body>
	
	<h2>jQuery Simpleslide 1.1</h2>
	<strong><a href='http://code.google.com/p/jquerysimpleslide/'>download (google code)</a></strong>
	<br /><br />
		<div id="myslides">
			<img src="img/1.jpg" class='slides' title='awesome slide number 1!'/>
			<img src="img/2.jpg" class='slides' title='another awesome slide!'/>
			<img src="img/3.jpg" class='slides' title='yet..another'/>
			<img src="img/4.jpg" class='slides' title='one last slide'/>
		</div>
		<div id="myslides2">
			<img src="img/4.jpg" class='slides' title='one last slide'/>
			<img src="img/3.jpg" class='slides' title='yet..another'/>
			<img src="img/2.jpg" class='slides' title='another awesome slide!'/>
			<img src="img/1.jpg" class='slides' title='awesome slide number 1!'/>
			
		</div>
		
	</body>
<div>

<h3>usage</h3>
<p>
1. include simpleslide js and css files in your page head. Make sure you have jquery 1.3 loaded of course (and optionally jquery easing for different transition types)!
</p>
<p>
2. create a div and add all images to be shown in slideshow to this div. Give the div a unique id. Optionally, add title tags to the images to use the title feature.
</p>
<p>
3. target the id of the div you added the images to with simpleslide plugin like this: 
<pre>
	$(document).ready(function(){
				$('#myslides').simpleslide('settings', {'frameWidth' : 500,
							    'frameHeight' : 333 , 
							    'labels' : true
							    //other parameters go here!
							    }
							  );
			});
</pre>
</p>
<p>
4. DONE!
</p>
</div>
	<div>
		<h3>parameters</h3>
<pre>
<b>startingSlide</b>	    // first slide to feature
<b>frameWidth</b>	    // width of slideshow, default 640		
<b>frameHeight</b>	    // height of slideshow, default 480
<b>titlebarHeight</b>	    // height of titlebar, default 20
<b>labels</b>		    // true or false, default true
<b>labelPosition</b>	    // 'top' or 'bottom', default bottom
<b>timePerSlide	</b>    // time per slide to feature in ms, default 5000
<b>transitionTime	</b>    // time per transition in ms, default 500 
<b>transitionType	</b>    // transition type - requires jquery easing (optional), default "swing"
</pre>
	</div>
	<div>
</html>
